<script lang="tsx">
  import { defineComponent, h, resolveComponent, ref, computed  } from 'vue'
  import { RouteRecordRaw, useRouter } from 'vue-router'
  import { useMenu } from './menu-data'
  import { listenerRouteChange } from '@src/utils/route-listener'
  import { useAppStore } from '@src/stores'
  
  export default defineComponent({
    setup() {
      /**
       * 菜单信息
       *   一般由后端配置返回
       *   通过路由注册的信息返回 
       *     简单配置，通过路由信息返回
       **/ 
      const router = useRouter()
      const menuList = useMenu()
      const appStore = useAppStore()
      // 是否展开
      const collapsed = computed({
        get() {
          return appStore.menuCollapse
        },
        set(val: boolean) {
          appStore.updateSettings({ menuCollapse: val })
        }
      })
      // 激活的key
      const selectedKey = ref<string[]>([])
      const goto = (item: RouteRecordRaw) => {
        /**
         * 由于a-menu绑定的selectedKey，会重新触发renderSubMenu的渲染
         **/ 
        selectedKey.value = [item.name as string]
        router.push({
          name: item.name,
        })
      }
      listenerRouteChange((newRoute) => {
        selectedKey.value = [newRoute.name as string]
      }, true)
      const renderSubMenu = () => {
        function travel(_route: RouteRecordRaw[], nodes = []) {
          if (_route) {
            _route.forEach(element => {
              const icon = element?.meta?.icon
                /**
                 * 示例用的 h(compile(`<${element?.meta?.icon}/>`))
                 * compile从vue里面解析来的, 但是运行时是不生效的, 需要调整配置
                 *   如 在vite.config.js里
                 *   alias: {
                 *     vue: 'vue/dist/vue.esm-bundler.js' 使用带有编译器的版本
                 *   }
                 **/
                ? () => h(resolveComponent(element.meta.icon || ''))
                : null
              // h(compile(`<${element?.meta?.icon}/>`))
              const node = element?.children && element?.children.length !== 0
                ? (
                  <a-sub-menu
                  key={element?.id}
                  v-slots={
                    {
                      icon,
                      title: element?.title || ''
                    }}
                  >
                    {travel(element?.children)}
                  </a-sub-menu>
                )
                : (
                  <a-menu-item
                    key={element?.name}
                    v-slots={{ icon }}
                    onClick={() => goto(element)}
                  >
                    {element?.title || ''}
                  </a-menu-item>
                )
                nodes.push(node)
            })
            return nodes
          }
        }
        const finalMenu = travel(menuList.value)
        return finalMenu
      }
      return () => (
        <div class="menuList">
          <a-menu
            style="height: 100%"
            selected-keys={selectedKey.value}
            auto-open-selected={true}
            v-model:collapsed={collapsed.value}
            show-collapse-button={true}
          >
            {renderSubMenu()}
          </a-menu>
        </div>
      )
    }
  })
</script>

<style lang="scss" scoped>
  .menuList {
    height: 100%;
    .arco-menu {
    }
    .arco-menu-vertical {
      .arco-menu-inner {
      }
      ::v-deep .arco-menu-inner {
        padding: 0px;
        .arco-icon {
          font-size: 26px;
        }
        .arco-menu-icon-suffix {
          font-size: 12px;
          .arco-icon {
            font-size: inherit;
          }
        }
      }
    }
  }
</style>
